<template>
  <div>
    <span style="font-size: 26px;color: #272727">知识库情况：</span>
    <zh-form
        :span="5"
        ref="rolePageFrom2"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :rules="rules"
    >
      <div style="width: 100%; padding: 0 20px">
        <div style="text-align: left;margin-top: 10px" v-if="disabled === false">
        </div>
<!--        <ep-button
            style="margin-top: 10px"
            size="default"
            icon="add.svg"
            @click="
            () => {
              this.addModel();
            }
          "
        >新增模块
        </ep-button>-->
        <div class="operate">
          <div style="width: 10%;">标题</div>
          <div style="width: 90%">
            <a-input placeholder="请输入标题" v-model="formData.h1602" :disabled="disabled"/>
          </div>
        </div>
        <div class="operate">
          <div style="width: 10%;">简介</div>
          <div style="width: 90%">
            <a-textarea placeholder="请输入简介" :auto-size="{ minRows: 3, maxRows: 6 }" v-model="formData.h1603" :disabled="disabled"/>
          </div>
        </div>
        <div v-for="(e, h16Index) in h16VOList" :key="h16Index" v-if="render">
          <div class="operate">
            <div style="width: 10%;">文件</div>
            <div style="width: 90%;display: block">
              <div style="text-align: right;width: 100%">
                <ep-button
                    icon="add.svg"
                    size="small"
                    type="primary"
                    @click="addMediaInfo(h16Index)" :disabled="disabled"
                >添加
                </ep-button>
              </div>
              <div>
                <ul class="media-wrap">
                  <li v-for="(item, index) in e.h15VOList" :key="index" v-if="render">
                    <div class="item special">
                      <div class="desc">序号</div>
                      <p>{{ item.h1507 }}</p>
                    </div>
                    <div class="item">
                      <div class="desc">名称</div>
                      <p>{{ item.h1503 }}</p>
                    </div>
                    <div class="item" v-if="item.h1502Name !== '全景'">
                      <div class="desc">文件名称</div>
                      <p>{{ item.h1505 }}</p>
                    </div>
                    <div class="item" v-if="item.h1502Name === '全景'">
                      <div class="desc">链接</div>
                      <p>{{ item.h1504 }}</p>
                    </div>
                    <div class="item">
                      <div class="desc"></div>
                      <div class="btn-wrap">
                        <ep-button
                            size="small"
                            :disabled="disabled"
                            @click="editMediaInfo(item,index,h16Index)"
                        >编辑
                        </ep-button>

                        <ep-button
                            size="small"
                            type="danger"
                            :disabled="disabled"
                            @click="deleteMediaInfo(index,h16Index)"
                            style="margin-left: 10px"
                        >删除
                        </ep-button>
                        <ep-button size="small"
                                   @click="dowloadFile(item)"
                                   style="margin-left: 10px"
                        >
                          下载
                        </ep-button>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a-modal
          :title="modalTitle"
          centered
          style="top: 20px"
          width="50%"
          destroyOnClose
          v-model="visible"
          cancelText="关闭"
          okText="保存"
          @ok="handleForm"
      >
        <konwledge-base-media ref="mediaInfoItem"  :disabled="disabled"></konwledge-base-media>
      </a-modal>
    </zh-form>
  </div>
</template>

<script>
import {fileDownloadUrl, fileShowUrl, getBatchDict} from "@/services/system/api";
import {
  knowledgeBaseAdd,
  getKnowledgeBaseDetails,
} from "@/services/system/whdngxlApi";
import modal from "ant-design-vue/lib/modal";
import KonwledgeBaseMedia from "@/pages/system/form/KonwledgeBaseMedia";
export default {
  name: "KonwledgeBaseAddForm",
  components: {
    KonwledgeBaseMedia,
  },
  props:{
    listQuery:{
      type:Function,
      default:null
    }
  },
  data() {
    return {
      dictData: {},
      disabled: false,
      formData: {
        h1601:'',
        h1602: '',
        h1603: '',
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
      h16VOList: [{
        h1602: '',
        h1603: '',
        h15VOList:[],
      }],
      h16VOItem: {
        h1602: '',
        h1603: '',
        h15VOList: [],
      },
      h15VOListDel: [],

      modalTitle:'',
      h15VOList:[],
      h1507Num: 0,
      visible:false,
      fileShowUrl: fileShowUrl, //预览接口地址
      render: true,
      h16Index: -1,
    };
  },
  created() {
    const params = {}
    params.dictFields = 'H1502'
    this.$http.post(getBatchDict, params).then(res => {
      this.dictData = res.result
    })
  },
  methods: {
    initData(row,operate){
      this.disabled = operate === 'view'
      if(row.h1601){
        const params = {};
        params.h1601 = row.h1601
        setTimeout(() => {
          this.$http
              .post(getKnowledgeBaseDetails, params)
              .then((res) => {
                if(res.result) {
                  this.formData = res.result
                  this.render=false
                  this.h16VOList[0].h15VOList=res.result.h15VOList
                  setTimeout(() => {
                    //页面无法更新渲染，先用v-if处理
                    this.render = true
                  }, 100)
                }
              })
              .catch((error) => {
              })
              .finally(() => {});
        }, 50);
      }
    },
    dowloadFile(row){
      let downloadUrl = fileDownloadUrl
      if (row.h1504.length>0){
        downloadUrl+=row.h1504
      }
      let a = document.createElement('a');
      a.href = downloadUrl;
      a.click();
    },
    getListSize(list) {
      this.h1507Num = 0;
      list.forEach((item) => {
        if (item.h1507 > this.h1507Num) {
          this.h1507Num = item.h1507;
        }
      });
      if (this.h1507Num < list.length) {
        this.h1507Num = list.length-1;
      }
      this.h1507Num++;
    },
    //新增
    addMediaInfo(index) {
      this.modalTitle = "新增";
      this.visible = true;
      this.h16Index = index
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        this.getListSize(this.h16VOList[this.h16Index].h15VOList);
        this.$refs.mediaInfoItem.h1507Num = this.h1507Num;
        this.$refs.mediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row,index,h16Index) {
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.h16Index = h16Index;
      this.visible = true;
      this.$nextTick(() => {
        this.h16Index = h16Index;
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        if (row.h1601) {
          row.flag = "edit";
        }
        this.$refs.mediaInfoItem.init(row);
      });
    },
    //确定
    handleForm() {
      var mediaInfoItem = this.$refs.mediaInfoItem.mediaInfoItem;
      if (this.modalTitle === "新增") {
        mediaInfoItem.flag = "save";
        if(!this.h16VOList[this.h16Index].h15VOList){
          this.h16VOList[this.h16Index].h15VOList = []
        }
        this.h16VOList[this.h16Index].h15VOList.push(mediaInfoItem);
      } else {
        this.h16VOList[this.h16Index].h15VOList.splice(this.editIndex, 1, mediaInfoItem);
      }
      this.$nextTick(() => {
        this.visible = false;
      });
    },
    deleteMediaInfo(index, h16Index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          // eslint-disable-next-line no-debugger
          debugger
          if ( this.h16VOList[h16Index].h15VOList[index].h1601) {
            const item = JSON.parse(JSON.stringify(this.h16VOList[h16Index].h15VOList[index]));
            item.flag = "delete";
            this.h15VOListDel.push(item);
          }
          this.h16VOList[h16Index].h15VOList.splice(index, 1);
        },
        onCancel: () => {},
      });
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    saveData(){
      this.$loading.show('正在处理数据,请等待...')
      const params = Object.assign(this.formData)
      params.h16VOList = this.h16VOList
      params.h15VOList = this.h15VOList
      params.h15VOListDel = this.h15VOListDel
      setTimeout(() => {
        this.$http.post(knowledgeBaseAdd, params).then((res) => {
          this.$message.info('保存成功')
          this.$emit("handleCancel")
          if(this.listQuery){
            this.listQuery()
          }
          this.$loading.hide()
        }).catch((error) => {
          console.log(JSON.stringify(error))
          this.$loading.hide()
        }).finally(() =>{
        })
      }, 50)
    },
    addModel() {
      if(this.h16VOList == undefined){
        this.h16VOList = []
      }
      this.h16VOList.push(JSON.parse(JSON.stringify(this.h16VOItem)))
      this.render = false
      setTimeout(() => {
        //页面无法更新渲染，先用v-if处理
        this.render = true
      }, 100)
    },
  },
}

</script>

<style lang="less" scoped>
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;


  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}
.media-wrap {
  margin-top: 15px;
  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    .item {
      flex: 0 0 auto;
      width: 18%;
      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn-wrap {
        text-align: center;
      }
      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }
      &.special {
        width: 5%;
      }
    }
  }
}
</style>